<template>
  <div class="parent">
    <px-tooltip class="box-item" effect="dark" content="导出图片" placement="bottom">
      <px-icon class="downImg" color="#3b82f6" @click="saveImg"><Download /></px-icon>
    </px-tooltip>
    <div class="averagswitch">
      平均量
      <px-switch v-model="averag" inline-prompt active-text="开" inactive-text="关" @change="getchartsValue" />
    </div>
    <echartsDom
      v-if="isShowEcharts"
      ref="childRef"
      style="width: 100%; height: 100%"
      :width="width"
      :height="height"
      :option="option"
      :type="type"
      :name="`${title}(${start}-${end})`"
    />
    <div v-else>
      <px-empty :image-size="200" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const childRef = ref(null);
const averag = ref(false);
const saveImg = () => {
  childRef.value.saveImg();
};
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  timeUnit: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  start: {
    type: String,
    default: ""
  },
  end: {
    type: String,
    default: ""
  },
  xlist: {
    type: Object,
    required: true
  },
  chartlist: {
    type: Object,
    required: true
  }
});
watch(
  () => props.xlist,
  newOption => {
    getoptions();
  }
);
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  series: [],
  yAxis: []
});
const { option, series, yAxis } = toRefs(state);
const getchartsValue = () => {
  getoptions();
};
const getoptions = () => {
  if (props.chartlist != null) {
    console.log(props.timeUnit);
    isShowEcharts.value = true;
    if (props.timeUnit == "DAY") {
      series.value = props.chartlist.map((item, index) => {
        return {
          name: item.chemical,
          type: "line",
          data: item.data.map(item => (item != null ? item : 0))
        };
      });
      yAxis.value = [
        {
          name: "总量 (t)",
          type: "value"
        }
      ];
    } else {
      if (averag.value) {
        series.value = [
          ...props.chartlist.map((item, index) => {
            return {
              name: item.chemical,
              type: "bar",
              yAxisIndex: 0,
              data: item.data.map(item => (item != null ? item : 0))
            };
          }),
          ...props.chartlist.map((item, index) => {
            return {
              name: `${item.chemical}平均量`,
              type: "line",
              yAxisIndex: 1,
              data: item.averageData.map(item => (item != null ? item : 0))
            };
          })
        ];
      } else {
        series.value = [
          ...props.chartlist.map((item, index) => {
            return {
              name: item.chemical,
              type: "bar",
              yAxisIndex: 0,
              data: item.data.map(item => (item != null ? item : 0))
            };
          })
        ];
      }

      yAxis.value = [
        {
          name: "总量 (t)",
          alignTicks: true,
          type: "value"
        },
        {
          name: "平均量 (t)",
          alignTicks: true,
          type: "value"
        }
      ];
    }
  } else {
    isShowEcharts.value = false;
  }
  console.log(series.value);
  option.value = {
    // toolbox: {
    //   show: true,
    //   feature: {
    //     saveAsImage: {
    //       title: "点击保存为图片",
    //       name: `${props.title}(${props.start.split(" ")[0]}-${props.end.split(" ")[0]})`
    //     }
    //   }
    // },
    grid: {
      left: "40px",
      top: "40px",
      right: "40px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      top: "10px",
      type: "scroll",
      width: "1000px"
    },
    tooltip: {
      // trigger: "axis"
      // confine: true
      formatter: function (parmas) {
        var color = parmas.color;
        var seriesData = parmas;
        var name = seriesData.name;
        var value = seriesData.value;
        return (
          name +
          "<br/>" +
          '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
          color +
          '"></span>' +
          parmas.seriesName +
          `${parmas.seriesType == "bar" ? "总量：" : "："}` +
          value
        );
      }
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: props.xlist
    },
    yAxis: yAxis.value,
    series: series.value
  };
};
</script>

<style scoped lang="scss">
.parent {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.downImg {
  position: absolute;
  top: -35px;
  right: 0;
  cursor: pointer;
}

.topIcon {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 20px;
  cursor: pointer;
}

.linediv {
  position: relative;
  float: left;
  width: 23px;
  height: 17px;
  margin-right: 10px;

  .line {
    position: absolute;
    top: 8px;
    width: 100%;
    height: 1px;
    background: #3b82f6;
  }

  .yuan {
    position: absolute;
    top: 6px;
    left: 9px;
    width: 5px;
    height: 5px;
    background: #3b82f6;
    border-radius: 50%;
  }
}

.averagswitch {
  position: absolute;
  top: -44px;
  right: 30px;
  font-size: 13px;
}
</style>
